// 为了每个模块变量不相互污染，每个模块有一个立即执行的函数
// 在立即执行的函数中声明变量

// 概览模块 && 监控模块
(function () {
    // 实现选项卡效果
    // $('.monitor .tabs').on('click', 'a', () => {
    // })
    // jQuery事件委托后，this仍是事件源，原生js的则是被委托对象
    $('.monitor .tabs').on('click', 'a', function () {
        $(this)
            .addClass('active')
            .siblings('a')
            .removeClass('active');
        $('.monitor .content')
            .eq($(this).index())
            .css('display', 'block')
            .siblings('.content')
            .css('display', 'none');
    });
    //概览模块 轮播动画
    // 1. 先克隆marquee里面所有的行（row）
    $(".marquee-view .marquee").each(function () {
        // console.log($(this));
        var rows = $(this)
            .children()
            .clone();
        $(this).append(rows);
    });
    // 2.css样式中添加动画效果

})();

// 点位分布
(function () {
    // 创建图表对象
    var myChart = echarts.init(document.querySelector('.point .pie'))
    // 配置项和数据
    var option = {
        tooltip: {
            trigger: 'item',
            position: function (pos, params, dom, rect, size) {
                // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
                var obj = { top: 0 };
                obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
                return obj;
            },
            // position: ['60 %', '50 %'],
            // 提示信息的格式
            // a:系列名  b：数据名称  c：数据   d：数据的百分比
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },

        // 注意颜色写的位置
        color: [
            "#006cff",
            "#60cda0",
            "#ed8884",
            "#ff9f7f",
            "#0096ff",
            "#9fe6b8",
            "#32c5e9",
            "#1d9dff"
        ],
        series: [
            {
                name: "点位统计",
                type: "pie",
                // 如果radius是百分比则必须加引号
                radius: ["10%", "70%"],
                center: ["48%", "50%"],
                roseType: "radius",
                data: [
                    { value: 20, name: "云南" },
                    { value: 26, name: "北京" },
                    { value: 24, name: "山东" },
                    { value: 25, name: "河北" },
                    { value: 20, name: "江苏" },
                    { value: 25, name: "浙江" },
                    { value: 30, name: "四川" },
                    { value: 42, name: "湖北" }
                ],
                // 修饰饼形图文字相关的样式 label对象
                label: {
                    fontSize: 10
                },
                // 修饰引导线样式
                labelLine: {
                    // 连接到图形的线长度
                    length: 6,
                    // 连接到文字的线长度
                    length2: 8
                }
            }
        ]
    };
    // 调用图表对象的方法，加载配置项和数据
    myChart.setOption(option);
    // 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener("resize", function () {
        // 让我们的图表调用 resize这个方法
        myChart.resize();
    });
})();

// 用户总量
(function () {
    var item = {
        name: "",
        value: 1200,
        // 1. 修改当前柱形的样式
        itemStyle: {
            color: "#254065"
        },
        // 2. 鼠标放到柱子上不想高亮显示
        emphasis: {
            itemStyle: {
                color: "#254065"
            }
        },
        // // 3. 鼠标经过柱子不显示提示框组件
        // tooltip: {
        //     extraCssText: "opacity: 0"
        // }
    };
    // 创建图表对象
    var myChart = echarts.init(document.querySelector('.users .bar'));
    // 配置项和数据
    var option = {
        // 1： 修改柱子的颜色
        // 修改线性渐变色方式 1
        color: new echarts.graphic.LinearGradient(
            // (x1,y2) 点到点 (x2,y2) 之间进行渐变
            0, 0, 0, 1,
            [
                { offset: 0, color: '#00fffb' }, // 0 起始颜色
                { offset: 1, color: '#0061ce' }  // 1 结束颜色
            ]
        ),
        // 需求2： 提示框组件放到柱子上触发， 没有阴影等效果
        //提示框组件
        tooltip: {
            trigger: 'item',
            // axisPointer: {            // 坐标轴指示器，坐标轴触发有效  这个模块我们此时不需要删掉即可
            // type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            // }
        },
        //- 需求3： 修改柱形图表大小，   以及相关网格。
        // - 饼形图修改图表大小是通过  series 对象里面的 radius
        // - 柱形图修改图标大小是通过  series 对象里面的 grid 对象  left  right 等
        // - 显示网格  show: true，网格颜色是  borderColor//提示框组件
        // 直角坐标系内绘图网格（区域）
        grid: {
            top: '5%',
            right: '3%',
            bottom: '3%',
            left: '0%',
            //  图表位置紧贴画布边缘是否显示刻度以及label文字 防止坐标轴标签溢出跟grid 区域有关系
            containLabel: true,
            // 是否显示直角坐标系网格
            show: true,
            //grid 四条边框的颜色
            borderColor: 'rgba(0, 240, 255, 0.3)'
        },
        //- 需求4： X 轴调整
        // - 柱子在刻度之间
        // - 剔除刻度不显示
        // - 刻度标签文字颜色  #4c9bfd   通过 axisLabel 对象设置
        // - 修改x轴线的颜色    axisLine  里面的   lineStyle
        // 控制x轴
        xAxis: [
            {
                // 使用类目，必须有data属性
                type: 'category',
                // 使用 data 中的数据设为刻度文字
                data: ['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆'],
                // 刻度设置
                axisTick: {
                    // true意思：图形和刻度居中中间
                    // false意思：图形在刻度之间
                    alignWithLabel: false,
                    // 不显示刻度
                    show: false
                },
                // x坐标轴文字标签样式设置
                axisLabel: {
                    color: '#4c9bfd'
                },
                // x坐标轴颜色设置
                axisLine: {
                    lineStyle: {
                        color: 'rgba(0, 240, 255, 0.3)',
                        // width:8,  x轴线的粗细
                        // opcity: 0,   如果不想显示x轴线 则改为 0
                    }
                }
            }
        ],
        // - 需求5： Y 轴调整
        // - 剔除刻度不显示
        // - Y轴文字颜色  #4c9bfd   通过 axisLabel 对象设置
        // - Y轴分割线颜色   splitLine 对象里面 lineStyle 对象设置
        // // 控制y轴
        yAxis: [
            {
                // 使用类目，必须有data属性
                type: 'value',
                // 刻度设置
                axisTick: {
                    alignWithLabel: false,
                    // 不显示刻度
                    show: false
                },
                // y坐标轴文字标签样式设置
                axisLabel: {
                    color: '#4c9bfd'
                },
                // y坐标轴颜色设置
                axisLine: {
                    lineStyle: {
                        color: 'rgba(0, 240, 255, 0.3)',
                        // width:8,  x轴线的粗细
                        // opcity: 0,   如果不想显示x轴线 则改为 0
                    }
                },
                // - 需求6：调整数据，与省略图形定制
                // y轴 分割线的样式 
                splitLine: {
                    lineStyle: {
                        color: 'rgba(0, 240, 255, 0.3)'
                    }
                }
            }
        ],
        series: [
            {
                data: [2100, 1900, 1700, 1560, 1400, item, item, item, 900, 750, 600, 480, 240],
                type: 'bar'
            }
        ]
    };

    // 调用图表对象的方法，加载配置项和数据
    myChart.setOption(option);

    // 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener("resize", function () {
        // 让我们的图表调用 resize这个方法
        myChart.resize();
    });
})();

// 订单功能
(function () {
    // 准备数据
    var data = {
        day365: {
            orders: '20,301,987', amount: '99834'
        },
        day90: {
            orders: '301,987', amount: '9834'
        },
        day30: {
            orders: '1,987', amount: '3834'
        },
        day1: {
            orders: '987', amount: '834'
        }
    }
    // 获取显示 订单数量 金额数量 容器
    var $h4Orders = $('.order h4:eq(0)');
    var $h4Amount = $('.order h4:eq(1)');
    $('.order').on('click', '.filter a', function () {
        // 点击切换 激活样式
        $(this).addClass('active').siblings().removeClass('active');
        // 点击切换数据
        var cuurdata = data[this.dataset.key];
        $h4Orders.html(cuurdata.orders);
        $h4Amount.html(cuurdata.amount);
    })
    // 开启定时器 切换数据
    // var index = 0;
    // var $allTab = $('.order .filter a');
    // setInterval(function () {
    //     index++;
    //     if (index >= 4) index = 0;
    //     $allTab.eq(index).click();
    // }, 5000)
    // 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener("resize", function () {
        // 让我们的图表调用 resize这个方法
        $('.order').resize();
    });
})();

// 销售统计模块
(function () {
    var data = {
        year: [
            [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
            [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
        ],
        quarter: [
            [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
            [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
        ],
        month: [
            [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
            [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
        ],
        week: [
            [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
            [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
        ]
    };
    var myChart = echarts.init(document.querySelector('.line'));
    // 指定配置项和数据
    var option = {
        tooltip: {
            trigger: "axis"
        },
        // 图例组件
        legend: {
            textStyle: {
                color: '#4c9bfd'  //图例文字颜色
            },
            right: '10%'  //距离右边10%
        },
        grid: {
            top: '20%',
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,  //包含刻度文字在内
            show: true,  //显示边框
            borderColor: '#012f4a'  //边框颜色
        },

        //x轴相关配置
        xAxis: {
            type: "category",
            boundaryGap: false,
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisTick: {
                show: false //去除刻度线
            },
            axisLabel: {
                color: '#4c9bfd'  //文本颜色
            },
            axisLine: {
                show: false  //去除轴线
            },
            // boundaryGap: false //取出轴内间距
        },
        yAxis: {
            type: "value",
            axisTick: {
                show: false //去除刻度线
            },
            axisLabel: {
                color: '#4c9bfd'  //文本颜色
            },
            splitLine: {
                lineStyle: {
                    color: '#012f4a'  //分割线颜色
                }
            },
        },
        color: ['#00f2f1', '#ed3f35'],
        series: [
            {
                name: "预期销售额",
                type: "line",
                stack: '总量',
                data: data.year[0],
                // data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
                // 折线修饰为圆滑
                smooth: true
            },
            {
                name: "实际销售额",
                type: "line",
                stack: '总量',
                data: data.year[1],
                // data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
                smooth: true
            }
        ]
    }

    // 切换效果
    $('.sales').on('click', '.caption a', function () {
        $(this).addClass('active').siblings().removeClass('active');
        var cuurdata = data[this.dataset.type];
        // 修改图表1的数据
        option.series[0].data = cuurdata[0];
        // 修改图表2的数据
        option.series[1].data = cuurdata[1];
        // 重新设置数据
        myChart.setOption(option)
        index = $(this).index() - 1;
    })
    var as = $(".sales .caption a");
    var index = 0;
    var timer = setInterval(function () {
        index++;
        if (index >= 4) index = 0;
        as.eq(index).click();
    }, 1000);
    // 鼠标经过sales，关闭定时器，离开开启定时器
    $(".sales").hover(
        function () {
            clearInterval(timer);
        },
        function () {
            clearInterval(timer);
            timer = setInterval(function () {
                index++;
                if (index >= 4) index = 0;
                as.eq(index).click();
            }, 1000);
        }
    );
    myChart.setOption(option);
    // 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener("resize", function () {
        // 让我们的图表调用 resize这个方法
        myChart.resize();
    });
})();

// 渠道模块雷达图
(function () {
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".radar"));
    // 2.指定配置

    var option = {
        tooltip: {
            show: true,
            // 控制提示框组件的显示位置(鼠标悬停后出现)
            position: ["55%", "2%"],
            // trigger: 'item',
            textStyle: {
                fontSize: 12
            }
        },
        radar: {
            indicator: [
                { name: "机场", max: 100 },
                { name: "商场", max: 100 },
                { name: "火车站", max: 100 },
                { name: "汽车站", max: 100 },
                { name: "地铁", max: 100 }
            ],
            // 修改雷达图的大小、位置
            radius: "65%",
            center: ['50%', '56%'],
            shape: "circle",
            // 分割的圆圈个数
            splitNumber: 4,
            name: {
                // 修饰雷达图文字的颜色
                textStyle: {
                    color: "#4c9bfd",
                    fontSize: 11
                }
            },
            // 分割的圆圈线条的样式
            splitLine: {
                lineStyle: {
                    color: "rgba(255,255,255, 0.3)"
                }
            },
            splitArea: {
                show: false
            },
            // 坐标轴的线修改为白色半透明
            axisLine: {
                lineStyle: {
                    color: "rgba(255, 255, 255, 0.3)"
                }
            }
        },
        series: [
            {
                name: "北京",
                type: "radar",
                // 填充区域的线条颜色
                lineStyle: {
                    normal: {
                        color: "#fff",
                        width: 1,
                        opacity: 0.5   //图形透明度
                    }
                },
                data: [[90, 19, 56, 11, 34]],
                // 设置图形标记 （拐点）
                symbol: "circle",
                // 这个是设置小圆点大小
                symbolSize: 3,
                // symbolOffset: [1, 7],
                // 设置小圆点颜色
                itemStyle: {
                    color: "#fff"
                },
                // 图形上的文本标签（让小圆点显示数据）
                label: {
                    show: true,
                    fontSize: 10,
                    distance: 1     //距离图形元素的距离
                },
                // 修饰我们区域填充的背景颜色
                areaStyle: {
                    color: "rgba(238, 197, 102, 0.6)"
                }
            }
        ]
    };
    // 3.把配置和数据给对象
    myChart.setOption(option);
    // 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener("resize", function () {
        // 让我们的图表调用 resize这个方法
        myChart.resize();
    });
})();

// 销售模块 饼形图 半圆形 设置方式
(function () {
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".gauge"));
    // 2. 指定数据和配置
    var option = {
        series: [
            {
                type: 'pie',
                // 放大图形
                radius: ['130%', '150%'],
                // 移动下位置  套住50%文字
                center: ['48%', '80%'],
                label: {
                    normal: {
                        show: false
                    }
                },
                // 起始角度，支持范围[0, 360]
                startAngle: 180,
                data: [
                    { value: 20 }, // 不需要名称
                    { value: 80, }, // 不需要名称
                    { value: 100, itemStyle: { color: 'transparent' } } // 透明隐藏第三块区域
                ]

            }
        ]
    }

    // 3. 把数据和配置给实例对象
    myChart.setOption(option);
    // 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener("resize", function () {
        // 让我们的图表调用 resize这个方法
        myChart.resize();
    });
})();

// 全国热销
(function () {
    // 拿到数据
    let hotData = [
        {
            city: '北京',  // 城市
            sales: '25, 179',  // 销售额
            flag: true, //  上升还是下降
            brands: [   //  品牌种类数据
                { name: '可爱多', num: '9,086', flag: true },
                { name: '娃哈哈', num: '8,341', flag: true },
                { name: '喜之郎', num: '7,407', flag: false },
                { name: '八喜', num: '6,080', flag: false },
                { name: '小洋人', num: '6,724', flag: false },
                { name: '好多鱼', num: '2,170', flag: true },
            ]
        },
        {
            city: '河北',
            sales: '23,252',
            flag: false,
            brands: [
                { name: '可爱多', num: '3,457', flag: false },
                { name: '娃哈哈', num: '2,124', flag: true },
                { name: '喜之郎', num: '8,907', flag: false },
                { name: '八喜', num: '6,080', flag: true },
                { name: '小洋人', num: '1,724', flag: false },
                { name: '好多鱼', num: '1,170', flag: false },
            ]
        },
        {
            city: '上海',
            sales: '20,760',
            flag: true,
            brands: [
                { name: '可爱多', num: '2,345', flag: true },
                { name: '娃哈哈', num: '7,109', flag: true },
                { name: '喜之郎', num: '3,701', flag: false },
                { name: '八喜', num: '6,080', flag: false },
                { name: '小洋人', num: '2,724', flag: false },
                { name: '好多鱼', num: '2,998', flag: true },
            ]
        },
        {
            city: '江苏',
            sales: '23,252',
            flag: false,
            brands: [
                { name: '可爱多', num: '2,156', flag: false },
                { name: '娃哈哈', num: '2,456', flag: true },
                { name: '喜之郎', num: '9,737', flag: true },
                { name: '八喜', num: '2,080', flag: true },
                { name: '小洋人', num: '8,724', flag: true },
                { name: '好多鱼', num: '1,770', flag: false },
            ]
        },
        {
            city: '山东',
            sales: '20,760',
            flag: true,
            brands: [
                { name: '可爱多', num: '9,567', flag: true },
                { name: '娃哈哈', num: '2,345', flag: false },
                { name: '喜之郎', num: '9,037', flag: false },
                { name: '八喜', num: '1,080', flag: true },
                { name: '小洋人', num: '4,724', flag: false },
                { name: '好多鱼', num: '9,999', flag: true },
            ]
        }
    ]
    // 1.渲染数据  实际开发使用数据渲染 不适用字符串拼接
    let htmlArr = [];
    $.each(hotData, (i, n) => {
        htmlArr.push(`
        <li>
            <span>${n.city}</span>
            <span>${n.sales}<s class="${n.flag ? 'icon-up' : 'icon-down'}"></s></span>
        </li>
        `);
    });
    $('.sup').html(htmlArr.join(''));

    // 鼠标移入sup li 切换数据 (li是新添加的 没有绑定事件 使用事件委托)
    $('.sup').on('mouseenter', 'li', function () {
        show($(this).index());
        index = $(this).index();
    });

    // 2. 定时切换
    let index = 0;
    let timer = setInterval(() => {
        index++;
        if (index >= 5) index = 0;
        show(index);
    }, 1000);


    // 3. 首次加载 显示第一个的内容
    $('.sup li').eq(0).mouseenter();

    // 4. 鼠标移入停止计时器 移出开启计时器
    $('.top').hover(() => { clearInterval(timer) }, () => {
        clearInterval(timer);
        timer = setInterval(() => {
            index++;
            if (index >= 5) index = 0;
            show(index);
        }, 1000);
    })



    // 封装show方法 (防止hover触发mouseenter方法)
    function show(index) {
        $('.sup li').eq(index).addClass('active').siblings('li').removeClass('active');
        let arr = [];
        $.each(hotData[index].brands, (i, n) => {
            arr.push(`
            <li>
                <span>${n.name}</span>
                <span>${n.num}<s class="${n.flag ? 'icon-up' : 'icon-down'}"></s></span>
            </li>
            `);
        })
        $('.sub').html(arr.join(''));
    }
})();